<template>
  <div class="home_box">
    <!-- 头部 -->
    <div class="home_header">
      <div class="left_title" :onshow="Display">
        {{ this.$store.state.classTitle }} >
      </div>
      <div class="iocn_box">
        <img src="../assets/img/sou.png" alt="" @click="onClickSou" />
        <img src="../assets/img/ke.png" alt="" />
      </div>
    </div>
    <!-- tab切换 -->
    <div class="tab_box">
      <van-tabs v-model="active" @click="onClick">
        <van-tab title="精选">
          <div class="swipe">
            <van-swipe
              class="my-swipe"
              :autoplay="3000"
              indicator-color="white"
            >
              <van-swipe-item v-for="(item, index) in swipe" :key="index">
                <img
                  :src="item.banner_img"
                  alt=""
                  @click="onClickDetail1(item)"
                />
              </van-swipe-item>
            </van-swipe>
          </div>
        </van-tab>
        <van-tab
          v-for="item in tabtitle"
          :key="item.id"
          :name="item.id"
          :title="item.title"
        >
          <div class="swipe">
            <van-swipe
              class="my-swipe"
              :autoplay="3000"
              indicator-color="white"
            >
              <van-swipe-item v-for="(item, index) in swipe" :key="index">
                <img :src="item.banner_img" alt="" />
              </van-swipe-item>
            </van-swipe>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <!-- 时间线 -->
    <div class="Time_box">
      <div class="time">
        <p>
          <img src="../assets/img/gu.png" alt="" />
        </p>
        <p class="p">距离考研220天</p>
      </div>
    </div>
    <!-- 公开课 -->
    <div>
      <div class="Public_box_container" v-show="ishow">
        <div class="public_box">
          <div class="title_box">
            <div class="left_box">
              <span>{{ this.title }}</span>
            </div>
            <div class="right_box">
              <span @click="complete">查看全部 ></span>
            </div>
          </div>
          <div class="content_box">
            <div
              class="content"
              v-for="(item, index) in list"
              :key="index"
              v-show="index < 3"
              @click="onClickDetail2(item)"
            >
              <div
                v-for="(item2, index) in item.teacher"
                :key="index"
                class="image_box"
                v-show="index < 1"
              >
                <img :src="item2.avatar" alt="" class="img" />
              </div>
              <div class="headline">{{ item.title }}</div>
              <button class="button1">{{ text }}</button>
              <div class="mm">{{ item.sales_num }}人已报名</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 推荐好课 -->
    <div>
      <div class="Recommended_box_container">
        <div class="Recommended_title">
          <h3>{{ this.title1 }}</h3>
        </div>
        <div
          class="Recommended_box"
          v-for="(item, index) in showlist"
          :key="index"
          @click="onClickDetail3(item)"
        >
          <div class="title_box">
            <span>{{ item.course_classify_title }}</span>
          </div>
          <div class="content_box">
            <div class="top_box">
              <div class="font">{{ item.title }}</div>
              <div class="model">
                <div v-for="(item2, index) in item.course_label" :key="index">
                  <button class="title">{{ item2.label_name }}</button>
                </div>
              </div>
            </div>
            <div class="bottom">
              <div class="HeadPortrait">
                <div
                  v-for="(item2, index) in item.teacher"
                  :key="index"
                  v-show="index < 3"
                >
                  <img :src="item2.avatar" alt="" />
                  <p>{{ item2.teacher_name }}</p>
                </div>
              </div>
              <div class="buttom_title">
                <div>{{ item.sales_num }}人已报名</div>
                <div>免费</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Popup />
    <div class="dd"></div>
  </div>
</template>

<script>
import {
  navigation,
  getBanner,
  getRecommended,
  getTabList,
  getPublic,
} from "../http/api";
// import publics from "../components/publics/index";
// import recommended from "../components/Recommended/index";
import Popup from "@/components/Popup/index";
export default {
  data() {
    return {
      id: this.$store.state.CategoryId,
      active: 0,
      tabtitle: [],
      swipe: [],
      Time: [],
      title: "",
      showlist: [],
      isID: 0,
      title1: "",
      list: [],
      text: "免费",
      ishow: true,
    };
  },
  created() {
    this.getClassify();
    this.onClick();
    this.Recommended();
    console.log("推荐好课", this.$store.state.CategoryId);
    this.getPublics();
    // this.getDate();
    // this.getlists();
  },

  methods: {
    Display(data) {
      console.log("子组件传递过来的", data);
    },
    // tab
    async getClassify() {
      const res = await navigation(this.id);
      console.log(res);
      this.tabtitle = res.data.data;
    },
    // tab切换轮播
    async onClick(id) {
      this.ishow = true;
      this.isID = id;
      this.$store.commit("isid", id);
      if (this.active === 0) {
        const res = await getBanner(this.id);
        console.log(res);
        this.swipe = res.data.data;
        // this.getPublics();
      } else {
        this.ishow = false;
        const res = await getBanner(id);
        console.log(res);
        this.swipe = res.data.data;
        this.getTabs();
      }
    },
    // 公开课
    async getPublics() {
      const res = await getPublic(this.$store.state.CategoryId);
      console.log(res);
      this.title = res.data.data.model_name;
      this.list = res.data.data.course_list;
      // this.getClassify();
    },
    // 推荐好课
    async Recommended() {
      const res = await getRecommended(this.$store.state.CategoryId);
      console.log(res);
      this.title1 = res.data.data.model_name;
      this.showlist = res.data.data.course_list;
    },
    // tab切换数据
    async getTabs() {
      const res = await getTabList(this.isID);
      console.log(res);
      this.showlist = res.data.data;
      // this.Recommended();
      // this.onClick()
    },
    complete() {
      this.$router.push({ path: "/publicity" });
    },
    onClickSou() {
      this.$router.push({ path: "/search" });
    },
    onClickDetail1(item) {
      console.log("轮播数据", item);
      const id = item.link;
      this.$router.push({ path: "/detail", query: { id: id } });
    },
    onClickDetail2(item) {
      console.log("公开数据", item);
      const id = item.id;
      // console.log(item, "详情id");
      this.$router.push({ path: "/detail", query: { id: id } });
    },
    onClickDetail3(item) {
      console.log("推荐好课", item);
      const id = item.id;
      this.$router.push({ path: "/detail", query: { id: id } });
    },
    // onPopup() {
    //   this.show = true;
    // },
  },
  components: {
    // publics,
    // recommended,
    Popup,
  },
};
</script>
<style lang="scss">
</style>
<style lang="scss" scoped>
.home_box {
  width: 100%;
  height: 100vh;
  background-color: #fff;
}
.home_header {
  width: 100%;
  height: 0.9rem;
  // background-color: #fff;
  display: flex;
  justify-content: space-between;
  .left_title {
    width: 30%;
    // background-color: slateblue;
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    margin-left: 3px;
  }
  .iocn_box {
    width: 30%;
    // background-color: green;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
}
.tab_box {
  width: 100%;
}
.swipe {
  width: 95%;
  margin: 0 auto;
  margin-top: 10px;
}
.van-swipe {
  width: 100%;
  height: 3rem;
  img {
    width: 100%;
    height: 100%;
    border-radius: 20px;
  }
}
.Time_box {
  width: 100%;
  height: 1rem;
  background-color: #fafafa;
  display: flex;
  justify-content: center;
  align-items: center;
  .time {
    width: 150px;
    height: 100%;
    // background-color: red;
    p:nth-child(1) {
      width: 50%;
      height: 60%;
      // margin: 0 auto;
      // background-color: rebeccapurple;
      margin-left: 40px;
      img {
        width: 100%;
        height: 100%;
        margin-bottom: 10px;
      }
    }
    .p {
      width: 90%;
      height: 30%;
      font-size: 16px;
      margin-left: 15px;
      // background-color: rosybrown;
    }
  }
}
.dd {
  width: 100%;
  height: 2rem;
}
.headline {
  font-size: 10px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
// 推荐好课
.Recommended_box_container {
  width: 100%;
  height: 100%;
  background-color: #fafafa;
  .Recommended_title {
    width: 95%;
    height: 1.5rem;
    // background-color: rebeccapurple;
    margin: 0 auto;
    font-size: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .Recommended_box {
    width: 95%;
    height: 4rem;
    background-color: #fff;
    margin: 0 auto;
    border-radius: 20px;
    margin-top: 10px;
    .title_box {
      width: 75px;
      height: 25px;
      background-color: #ff8800;
      color: #fff;
      border-radius: 25px 9px 25px 9px;
      font-size: 12px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .content_box {
      width: 90%;
      height: 85%;
      //   background-color: springgreen;
      margin: 5px auto 0;
      .top_box {
        width: 100%;
        height: 50%;
        // background-color: steelblue;
        .font {
          width: 100%;
          height: 70%;
          font-size: 18px;
          //   background-color: rgb(207, 135, 235);
        }
        .model {
          width: 100%;
          height: 30%;
          display: flex;
          justify-content: flex-start;
          //   background-color: pink;
        }
        .model div {
          height: 100%;
          display: flex;
        }
        .title {
          //   width: 150px;
          height: 100%;
          font-size: 8px;
          border: none;
          outline: none;
          border-radius: 10px;
          margin-left: 5px;
          //   float: left;
        }
      }
      .bottom {
        width: 100%;
        height: 50%;
        // background-color: skyblue;
        .HeadPortrait {
          width: 100%;
          height: 50%;
          // background-color: darkblue;
          border-bottom: 1px solid #ccc;
          display: flex;
          justify-items: center;
          img {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            vertical-align: middle;
            float: left;
            margin-top: 10px;
            margin-left: 10px;
          }
          p {
            font-size: 16px;
            float: left;
            margin-top: 20px;
          }
        }
        .buttom_title {
          width: 100%;
          height: 50%;
          // background-color: slateblue;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        .buttom_title div {
          font-size: 16px;
        }
        .buttom_title div:nth-child(2) {
          font-size: 18px;
          color: green;
        }
      }
    }
  }
}
</style>
<style lang="scss" scoped>
// 公开课
.Public_box_container {
  width: 100%;
  height: 4.3rem;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  .public_box {
    width: 95%;
    height: 100%;
    // background-color: green;
    .title_box {
      width: 100%;
      height: 20%;
      // background-color: red;
      display: flex;
      justify-content: space-between;
      .left_box {
        width: 30%;
        height: 100%;
        // background-color: royalblue;
        font-size: 22px;
        font-weight: 600;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .right_box {
        width: 30%;
        height: 100%;
        // background-color: royalblue;
        font-size: 14px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }
    }
    .content_box {
      width: 100%;
      height: 80%;
      // background-color: rosybrown;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .content {
        width: 30%;
        height: 90%;
        background-color: #fdead0;
        font-size: 14px;
        overflow: hidden;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        display: -webkit-box;
      }
    }
  }
}
.button1 {
  width: 80px;
  background-color: #f18d00 !important;
  padding: 5px 5px;
  border: none;
  outline: none;
  border-radius: 5px;
  margin-top: 10px;
  margin-left: 18px;
  color: #fff;
}
.mm {
  width: 100px;
  font-size: 10px;
  color: rgb(172, 69, 21);
  // margin-top: 20px;
  margin-left: 20px;
  margin-top: 10px;
}
.image_box {
  width: 100%;
  // position: relative;
  margin-left: 40px;
  margin-bottom: 10px;
}
.img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #f18d00;
  // z-index: 666;
  // position: absolute;
  // left: 40px;
  // bottom: 0px;
}
</style>
